<template>
  <div id="myChart" :style="{width: '800px', height: '500px',overflowY: hidden}">
      <h1>BAR</h1>
  </div>
</template>
<script>
  export default {
    name: 'Bar',
    mounted(){
      let _this = this
      axios.get('http://localhost:8800/book/bar').then(function (response) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = _this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: response.data.names
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: response.data.values,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        });
      })

    }
  }
</script>